<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
        	1.relative布局，可以明显的看到test 相对蓝块偏移30px
        	2.把下面的段落给遮住了，他只是自己被挤下去，不关其他人的事而
        -->
	</head>

	<body>
		<div style="width:400px;background-color:cornflowerblue ;height: 300px;">
			<p>1.relative布局，可以明显的看到test 相对蓝块偏移30px</p>
        	<p>2.把下面的段落给遮住了，他只是自己被挤下去，不关其他人的事而</p>
		</div>
		<div style="position: relative;top: 30px;background-color: lemonchiffon;">test</div>
		<p style="font-size: 21px;">这是一个段落啊</p>
	</body>

</html>